<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../lib/themes/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../lib/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/demo.css">
    <script type="text/javascript" src="../../lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../lib/js/jquery.serializeObject.js"></script>
</head>

<body>
    <ul id="tt"></ul>
    <form id="ff" class="easyui-form" data-options="novalidate:true">

        <table cellpadding="5">
            <tr>
                <td>parentId:</td>
                <td>
                    <input type="text" name="parentId" id="parentId" readonly=”readonly”/>
                </td>
            </tr>
            <tr>
                <td>分类名称:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="title" data-options="required:true">
                </td>
            </tr>
        </table>
    </form>
    <div style="text-align:left;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addRootNode()" style="width:80px">添加根节点</a>

        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addChildNode()" style="width:80px">添加子节点</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeNodes()" style="width:80px">删除节点</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="change()">Change</a>
    </div>
    <script type="text/javascript">
        $('#tt').tree({
            method: 'get',
            url: 'http://localhost:3000/classify/list',
            onClick(node) {
                console.log(node._id)
                $('#parentId').val(node._id)//获取当前Pid
            }
        });
        //添加根节点
        function addRootNode() {
            $('#ff').form('submit', {
                onSubmit: function () {
                    if ($(this).form('enableValidation').form('validate')) {
                        var data = $('#ff').serializeObject();
                        delete data.parentId;//添加根节点 pid 为null
                        $.ajax({
                            url: 'http://localhost:3000/classify/data',
                            type: 'post',
                            data: data
                        }).done(function (res) {
                            $('#ff').form('clear')
                            $("#tt").tree("reload")
                            $.messager.show({
                                title: '信息提示',
                                msg: '添加根节点成功',
                                showType: 'show'
                            })
                        });
                    }
                }
            });
        }
        //添加子节点
        function addChildNode() {
            var data = $('#ff').serializeObject();
            if (data.parentId) {
                $('#ff').form('submit', {
                    onSubmit: function () {
                        if ($(this).form('enableValidation').form('validate')) {

                            $.ajax({
                                url: 'http://localhost:3000/classify/data',
                                type: 'post',
                                data: data
                            }).done(function (res) {
                                $('#ff').form('clear')
                                $("#tt").tree("reload")
                                $.messager.show({
                                    title: '信息提示',
                                    msg: '添加字节点成功',
                                    showType: 'show'
                                })
                            });
                        }
                    }
                });
            } else {
                $.messager.show({
                    title: '信息提示',
                    msg: '添加节点方式错误',
                    showType: 'show'
                })
            }

        }
        //删除节点
        function removeNodes() {
            var node = $('#tt').tree('getSelected');// get checked nodes
            var val =$('#parentId').val();
            if (node&&val) {
                if (confirm('你确定要删除么？')) {
                    $.ajax({
                        url: 'http://localhost:3000/classify/data/' + node._id,
                        type: 'delete'
                    }).done(function (res) {
                        console.log(res);
                        $('#ff').form('clear')
                        $("#tt").tree("reload")
                    })
                }
            } else {
                $.messager.show({
                    title: '信息提示',
                    msg: '未选择要删除的文件',
                    showType: 'show'
                })
            }

        }
        function clearForm() {
            $('#parentId').val('');
            $('#ff').form('clear');     
        }
        //修改
        function change() {
            $('#ff').form('submit', {
                onSubmit: function () {
                    if ($(this).form('enableValidation').form('validate')) {
                        //将表单数据序列化成对象
                        var data = $('#ff').serializeObject();
                        data._id = data.parentId;
                        delete data.parentId;
                        if (data._id && data._id.trim().length > 0) {
                            $.ajax({
                                url: 'http://localhost:3000/classify/data/' + data._id,
                                type: 'put',
                                data: data,
                            }).done(function (res) {
                                $("#tt").tree("reload");//在向服务器改变数据之后，更新前台数据
                                clearForm()
                            })
                        }
                    } else {
                        $.messager.show({
                            title: '信息提示',
                            msg: '未选择要修改的文件',
                            showType: 'show'
                        })
                    }
                }
            });
        }
    </script>
</body>

</html>